import { useMount } from 'ahooks'
import * as echarts from 'echarts'
import { useRef, useState, RefObject } from 'react'

/**
 * useCharts 自定义Hook - 用于创建和管理ECharts图表实例
 *
 * @description 这个Hook封装了ECharts图表的初始化逻辑，提供了一个简单的方式来在React组件中使用ECharts
 *
 * @returns {[RefObject<HTMLDivElement>, echarts.EChartsType | undefined]} 返回一个数组，包含：
 *   - chartRef: DOM引用，需要绑定到图表容器的div元素上
 *   - chartInstance: ECharts实例对象，可以用来调用ECharts的API方法（如setOption等）
 *
 * @example
 * ```tsx
 * import { useCharts } from '@/hook/useCharts'
 *
 * const MyChart = () => {
 *   const [chartRef, chartInstance] = useCharts()
 *
 *   useEffect(() => {
 *     if (chartInstance) {
 *       chartInstance.setOption({
 *         title: { text: '示例图表' },
 *         xAxis: { type: 'category', data: ['A', 'B', 'C'] },
 *         yAxis: { type: 'value' },
 *         series: [{ data: [120, 200, 150], type: 'line' }]
 *       })
 *     }
 *   }, [chartInstance])
 *
 *   return <div ref={chartRef} style={{ width: '100%', height: '400px' }} />
 * }
 * ```
 */
export const useCharts = (): [RefObject<HTMLDivElement>, echarts.EChartsType | undefined] => {
  // 创建DOM引用，用于绑定到图表容器元素
  const chartRef = useRef<HTMLDivElement>(null)

  // 状态管理ECharts实例
  const [chartInstance, setChartInstance] = useState<echarts.EChartsType>()

  // 组件挂载时初始化ECharts实例
  useMount(() => {
    // 基于DOM引用初始化ECharts实例
    const chart = echarts.init(chartRef.current as HTMLElement)
    // 将实例保存到状态中，供外部使用
    setChartInstance(chart)
  })

  // 返回DOM引用和ECharts实例
  return [chartRef, chartInstance]
}
